<template>
  <el-drawer custom-class="zw_drawer" v-model.sync="drawer" :direction="direction" :size="width" @close="handleClose" @open="handleOpen">
    <template #title>
      <div class="drawer_tit">
        {{ title }}
      </div>
    </template>
    <template #default>
      <div class="content">
        <el-scrollbar class="main"><slot></slot></el-scrollbar>
        
      </div>
    </template>
    <template #footer>
      <el-button type="primary" @click="confirmClick(4)" v-show="isShow">提交</el-button>
      <el-button type="primary" @click="confirmClick(1)" v-show="!isShow"> 删除</el-button>
      <el-button type="primary" @click="confirmClick(2)" v-show="!isShow">客户保护设置</el-button>
      <el-button type="primary" @click="confirmClick(3)" v-show="!isShow">编辑</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const drawer = ref(false)
const title = ref('我是标题2')
const direction = ref('rtl')
const width = ref(425)
const drawerMsg = ref('提交')
const isShow = ref(true)
const emit = defineEmits({
  submit: null
})
const handleClose = () => {
  drawer.value = false
}
const handleOpen = () => {
  drawer.value = true
}
const confirmClick = (data: any) => {
  emit('submit', data)
}
defineExpose({
  drawer,
  width,
  drawerMsg,
  title,
  isShow
})
</script>
